<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="min-width: 600px;">
        <el-form :model="classForm" ref="provideECardRef" :rules="provideECardRules">
            <el-form-item label="选择年级" prop="gradeInfo" style="margin-left: 10px">
                <el-select clearable v-model="classForm.gradeId" autocomplete="off" placeholder="请选择年级"
                    @change="getClassInfoList">
                    <el-option :key="year + 2" :value="year + 2" :label="year + 2"></el-option>
                    <el-option :key="year + 1" :value="year + 1" :label="year + 1"></el-option>
                    <el-option :key="year" :value="year" :label="year"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择班级" prop="classList">
                <div class="mt-4">
                    <el-checkbox-group v-model="classForm.classList">
                        <el-checkbox v-for="item in classList" :label="item.classId + '班'" border
                            style="width: 80px;margin-bottom: 5px" />
                    </el-checkbox-group>
                </div>
            </el-form-item>
        </el-form>
        <template #footer style="width:400px">
            <span class="dialog-footer">
                <el-button @click="clear()">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElTree } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
    name: "eCard",
    components: {
        ElForm,
        ElMessage,
    },
    data() {
        return {
            dialogFormVisible: ref(false),
            gradeList: [],
            provideECardRef: "",
            title: "",
            year: "",
            classList: [],
            classForm: {
                gradeId: "",
                classList: [],
            },
            // 校验规则
            provideECardRules: {
                classList: vxRule(true, null, "blur"),
            },
        };
    },
    mounted() {
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.clear();
        },
        clear() {
            this.dialogFormVisible = false;
            this.classForm.gradeId = "";
            this.classForm.classList = []
        },
        getClassInfoList() {
            httpService(
                "/pythonApi/eCardApi/getClassInfoList",
                {
                    gradeId: this.classForm.gradeId
                },
                "get"
            ).then((data) => {
                this.classList = data.data
            });
        },
        save() {
            if (this.classForm.classList) {
                this.classForm.classList = this.classForm.classList.map(item => item = item.replace('班', ''))
            }
            this.$refs.provideECardRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("gradeId", this.classForm.gradeId);
                    params.append("classList", this.classForm.classList);
                    httpService("/pythonApi/eCardApi/batchInfo", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success(data.message);
                                this.clear();
                                //刷新父组件的数据
                                this.$parent.getSubjectAliasList();
                            } else {
                                ElMessage.error(data.message);
                            }
                        }
                    );
                }
            })
        },
    },
};
</script>
<style></style>